<template>
    <div id="Device">
        <div class="Device_top">
            <div class="form">
                <div class="form_title">
                    <span>设备集群</span>
                </div>
                <zy-select v-if="formConfig" :fromValue="queryForm"
                 @resetForm="resetForm" :formConfig="formConfig" @search="search"></zy-select>
                <!-- <zy-tags :tags="tags"></zy-tags> -->
            </div>
        </div>
        <div class="Device_bottom">
            <div class="table">
                <div class="table_mask"></div>
                <div class="table_body">
                    <div class="card" @click="toDeviceDetails(item.device_id)" v-for="item in tableData" :key="item.id">
                        <div class="name">
                            <i :class="`iconfont ${item.icon}`"></i>
                            {{ item.device_name }}
                        </div>
                        <div class="dimg">
                            <img src="@/assets/Device/no_img_1.png" alt="" />
                        </div>
                        <div class="status">
                            <div class="hoverAtt" :key="i" v-for="i in cloumConfig">
                                <div v-if="i.format">
                                    <span class="lable_name">{{ i.label }}</span>
                                    :
                                    <span class="label_value" :style="`color :${i.color(item[i.name])}`">{{ i.format(item[i.name]) }}</span>
                                </div>
                                <div v-else>
                                    <span class="lable_name">{{ i.label }}</span>
                                    :
                                    <span class="label_value">{{ item[i.name] }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <el-card shadow="hover">
                            <div class="item_img" @click="handlePreview(item.device_img, item.codeUrl)">
                                <img :src="item.codeUrl" alt="" class="code_img" />
                                <el-image style="width: 100%; height: 180px" title="设备图片 点击查看大图" :src="item.device_img">
                                    <div slot="error" class="image-slot">
                                        <img src="@/assets/Device/no_img_1.png" alt />
                                    </div>
                                </el-image>
                            </div>
                            <el-tooltip class="item" content="点击查看设备详情" placement="top">
                                <div class="lables" @click="toDeviceDetails(item.device_id)">
                                    <div class="hoverAtt" :key="i" v-for="i in cloumConfig">
                                        <div v-if="i.format">
                                            <span class="lable_name">{{ i.label }}</span>
                                            <span class="label_value" :style="`color :${i.color(item[i.name])}`">{{ i.format(item[i.name]) }}</span>
                                        </div>
                                        <div v-else>
                                            <span class="lable_name">{{ i.label }}</span>
                                            <span class="label_value">{{ item[i.name] }}</span>
                                        </div>
                                    </div>
                                </div>
                            </el-tooltip>
                        </el-card> -->
                </div>
                <div class="pagination">
                    <el-pagination :page-size="pagination.pageSize" layout="total,prev, pager, next, jumper" :total="pagination.total" @current-change="changePage"></el-pagination>
                </div>
            </div>
        </div>
        <Preview ref="Preview" />
    </div>
</template>

<script>
import { requestApi } from '@/requset/api'
import { mapState } from 'vuex'
import zySelect from '@/components/common/zySelect'
import zyTags from '@/components/common/zyTags.vue'
import Preview from './Preview.vue'
import { config, cloum, colors } from './config.js'
import QRCode from 'qrcode'
export default {
    data() {
        return {
            qrcode: '',
            queryForm: {
                scope_id: null,
                scope_id_list: [],
                type_id: null,
                device_name: '',
                warn_level: null,
                page: 1,
            },
            tableData: [],
            formConfig: null,
            cloumConfig: null,
            stat: null,
            pagination: {
                pageSize: 0,
                total: 0,
            },
        }
    },
    components: {
        zySelect,
        zyTags,
        Preview,
    },
    computed: {
        ...mapState('backstage', ['backstageData', 'deviceType']),
        tags() {
            if (this.stat) {
                const data = [
                    { title: '停机', num: this.stat.stoppage },
                    { title: '正常', num: this.stat.normal },
                    { title: '告警', num: this.stat.warn },
                    { title: '离线', num: this.stat.offline },
                ]

                return data.map((item, index) => {
                    return {
                        title: item.title,
                        num: item.num,
                        color: colors[index % colors.length],
                    }
                })
            } else return []
        },
    },
    methods: {
        //跳转设备详情
        toDeviceDetails(device_id, sensor_index) {
            if (device_id && !sensor_index) this.$router.push(`/index/devicedetails?device_id=${device_id}`)
            else this.$router.push(`/index/devicedetails?device_id=${device_id}&id_s=${sensor_index}`)
        },
        //联合查询
        changePage(e) {
            this.queryForm.page = e
            this.getList()
        },
        // 重置表单
        resetForm() {
            this.queryForm = {
                scope_id: null,
                scope_id_list: [],
                type_id: null,
                device_name: '',
                warn_level: null,
                page: 1,
            }
            this.getList()
        },
        SuijiString() {
            let randomString = ''
            const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'

            for (let i = 0; i < 11; i++) {
                const randomIndex = Math.floor(Math.random() * characters.length)
                randomString += characters[randomIndex]
            }

            return randomString
        },
        download_img(url) {
            // 创建一个链接元素
            const link = document.createElement('a')
            link.href = url
            link.download = 'image.jpg' // 设置下载的文件名
            link.target = '_blank'

            // 触发链接的点击事件
            link.dispatchEvent(new MouseEvent('click'))
        },
        getList() {
            let arr = this.queryForm.scope_id_list
            if (arr.length != 0) this.queryForm.scope_id = arr[arr.length - 1]
            requestApi('post', 'device/list', this.queryForm, true).then((res) => {
                if (res.data.code == 0) {
                    this.tableData = res.data.data
                    this.pagination = res.data.pagination
                    this.stat = res.data.stat
                    this.tableData.forEach((e) => {
                        if (!e.warn_level) e.warn_level = 0
                        if (!e.warn_count) e.warn_count = 0
                        if (!e.sensor_count) e.sensor_count = 0
                        let a = this.SuijiString()
                        QRCode.toDataURL(`${e.device_id};${a};${e.type_id}${e.warn_count}${e.status}`, (err, url) => {
                            if (err) {
                                console.error(err)
                            } else {
                                e.codeUrl = url
                            }
                        })
                    })
                }
            })
        },
        search() {
            this.getList()
        },
        handlePreview(device_img, codeUrl) {
            this.$refs.Preview.doOpen(device_img, codeUrl)
        },
        setQueryForm(queryForm, query) {
            let { warn_level, device_name, zone_id, factory_id, company_id, group_id } = query
            if (warn_level) this.queryForm.warn_level = warn_level
            if (device_name) this.queryForm.device_name = device_name
            let setList = (userLevel, list) => {
                if (userLevel === 'zone') {
                    return list.slice(3, 4)
                } else if (userLevel === 'factory') {
                    return list.slice(2, 4)
                } else if (userLevel === 'company') {
                    return list.slice(1, 4)
                } else {
                    return list
                }
            }
            if (zone_id) {
                this.$nextTick(() => {
                    queryForm.scope_id_list = setList(sessionStorage.getItem('userLevel'), [Number(group_id), Number(company_id), Number(factory_id), Number(zone_id)])
                    this.getList()
                })
            } else this.getList()
        },
    },
    filters: {
        setStatus(val) {
            if (val == 1) return '正常'
            else return '异常'
        },
    },
    created() {
        config[1].options = this.backstageData
        config[2].options = this.deviceType
        this.formConfig = config
        this.cloumConfig = cloum
        this.setQueryForm(this.queryForm, this.$route.query)
    },
}
</script>

<style lang="less" scoped>
#Device {
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .Device_top {
        width: 100%;
        height: 8.625rem;

        position: relative;

        .form {
            background-image: url(@/assets/common/Form_bg.png);
            background-size: 100% 100%;
            height: 94%;
            width: 96%;
            position: absolute;
            left: 2%;
            top: 6%;

            .form_title {
                color: white;
                width: 100%;
                display: flex;
                height: 2.875rem;
                line-height: 2.875rem;
                font-weight: 600;
                text-indent: 1.875rem;
                float: left;
                font-size: 1.375rem;
            }
        }
    }

    .Device_bottom {
        width: 100%;
        height: calc(100% - 8.625rem);
        // flex-grow: 4;
        position: relative;
        .table {
            position: absolute;
            left: 2%;
            width: 96%;
            height: 100%;

            .pagination {
                position: absolute;
                bottom: 10px;
                width: 100%;
                display: flex;
                justify-content: center;
            }

            .table_body {
                position: absolute;
                left: 2%;
                bottom: 8%;
                width: 96%;
                height: 86%;
                justify-content: space-around;
                display: grid;
                grid-template-columns: repeat(auto-fill, 18rem);
                row-gap: 0.4rem;
                overflow-y: scroll;
                padding: 5px 0;
                .card {
                    transition: all 0.3s;
                    color: #b2e3ff;
                    width: 18rem;

                    height: 9rem;

                    border: 2px solid #007bff;
                    border-radius: 0.4rem;
                    position: relative;

                    .name {
                        font-size: 1rem;
                        margin: 0.5rem 0 0 0.25rem;
                    }
                    .dimg {
                        margin: 0.5rem 0 0 0.25rem;
                        width: 60%;
                        // height: 7rem;
                        height: 50%;
                        // background-color: rgb(79, 118, 225,.5);
                        border-radius: 4px;
                        text-align: center;
                        img {
                            height: 100%;
                        }
                    }
                    .status {
                        width: 38%;
                        position: absolute;
                        right: 0.5rem;
                        top: 2rem;
                        display: flex;
                        flex-direction: column-reverse;
                        justify-content: space-around;
                        .hoverAtt {
                            font-size: 0.9rem;
                            margin-bottom: 0.5rem;
                        }
                    }
                }
                .card :hover {
                    cursor: pointer;
                    // border: 2px solid #007bff;
                }
            }

            .table_mask {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                background-image: url(@/assets/common/table_bg.png);
                background-size: 100% 100%;
                opacity: 0.7;
                z-index: -50;
            }
        }
    }
}
</style>
